<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{padding: 0; margin: 0; list-style-type: none;}
    .cont{ width: 1200px; height: 500px; background-color:azure; display: flex;flex-direction: row; margin: 50px auto;}
    .w{ flex: 0 0 48%; padding: 20px; margin: 1%;}
    .left{ background-color: bisque;}
    .right{ background-color: blueviolet;}
    .left span,.right span{ padding:10px 20px ; border: 1px solid red; box-shadow: 0 4px 10px rgb(red, green, blue); position: relative; margin-right: 5px;}
    .right span{ margin-right: 10px;}
    .cont h1{ text-align: center; align-self: center;}
    .drags{ background-color: blanchedalmond;}
    .w span abbr{ position: absolute; top: 5px; right: 5px; font-size: 8px;}
</style>
<body>
    <div class="cont">
        <h1>拖拉拽</h1>
        <div class="w left" data-drop="text">
              <span draggable="true">A <abbr title="x">x</abbr></span>
              <span draggable="true">B <abbr title="x">x</abbr></span>
              <span draggable="true">C <abbr title="x">x</abbr></span>
              <span draggable="true">D <abbr title="x">x</abbr></span>
              <span draggable="true">E <abbr title="x">x</abbr></span>
              <span draggable="true">F <abbr title="x">x</abbr></span>
              <span draggable="true">G <abbr title="x">x</abbr></span>
        </div>
        <div class="w right" data-drop="copy"></div>
    </div>
    <script>
        let cont = document.querySelector('.cont');
        let startnode = '';
        


        //鼠标开始拖动事件
        cont.ondragstart = function(e){
             //console.log(e.target);
             startnode = e.target;
        }
        
        //鼠标移动事件
        cont.ondragover = function(e){
            e.preventDefault();
            if(e.target.dataset.drop == 'copy'){
                //console.log(e.target);
            }
        }
        cont.ondragenter = function(e){
            //console.log(e.target);
            if(e.target.dataset.drop == 'copy'){
                e.target.classList.add('drags');
            }
        }
        
        cont.ondrop = function(e){
            console.log(startnode,123);
            e.target.classList.remove('drags');
            if(!e.target.dataset.drop || e.target.dataset.drop == ''){
                return
            }
            let aaclones = startnode.cloneNode(true);
            aaclones.classList.add('aaclones');
            e.target.appendChild(aaclones);
            aaclones.addEventListener('dblclick',function(){
                aaclones.remove();
            })
        }


        
        //删除节点父节点
        let abbr = document.querySelectorAll('abbr');
        
        for(let i = 0; i < abbr.length; i++){
            // abbr[i].onclick = function(){
            //     this.parentNode.remove();
            // }
            abbr[i].addEventListener('click',function(){
                abbr[i].parentNode.remove();
            })
        }


    </script>
</body>
</html>